function xuan(json){
    fetch(json)
    .then(function(res){return res.json()})
    .then(function(data){
       
        var tbo = document.querySelector('.tbo')
        tbo.innerHTML=cont(data)
    })
    function cont(data){
        return data.map(function(it,index){
            return`
                    <tr >
                        <td><input type="checkbox" name="check" id=""></td>
                        <td>${it.IDNumber}</td>
                        <td>${it.name}</td>
                        <td>${it.type}</td>
                        <td >${it.sex}</td>
                        <td>${it.phoneNum}</td>
                        <td>${it.time}</td>
                        <td>${it.idh}</td>
                        <td><img src="../../images/afterEnd/del.svg" alt="" title="删除用户"></td>
                        <td><img src="../../images/afterEnd/alter.svg" alt="" title="修改用户"></td> 
                    </tr>
            `
        }).join('')
    }
    }
    xuan('../../api/user0.json')
// -----添加按钮------------------------------
var btn = document.querySelector('.top .look img')
var fo = document.querySelector('.add')
var btnq= document.querySelector('.add form #id1 button:nth-child(2)')//确认按钮

btn.addEventListener('mousedown',function(){
    btn.style.transform = "scale(0.8)"
})
btn.addEventListener('mouseup',function(){
    btn.style.transform = ""
})

fo.style.display = 'none'
btn.addEventListener('click',function(){
    console.log(111)
    if(fo.style.display=='none'){
        fo.style.display='block'
    }
})
//------查询按钮---------------------------------
var che = document.querySelector('.top .look button')
che.addEventListener('mousedown',function(){
    che.style.transform = "scale(0.8)"
})
che.addEventListener('mouseup',function(){
    che.style.transform = ""
})
//-----翻页------------------------------------------
var li = document.querySelectorAll('.myul li')

li[1].addEventListener('click',function(){
    xuan('../../api/user0.json')
 })
 
 li[2].addEventListener('click',function(){
    xuan('../../api/user1.json')
 })
 
 li[3].addEventListener('click',function(){
     xuan('../../api/user2.json')
  })
// 全选 :checkbox前面要有空格
$('.the :checkbox').click(function(){
    if( $('.the :checkbox').prop('checked')==true){
        $('.tbo :checkbox').prop('checked',true)
    }else{
        $('.tbo :checkbox').prop('checked', false)
    }
  })
// 删除按钮
$('.tbo').on('click',' td:nth-child(9) img',function(){
    $('.tbo td:nth-child(9) img').click(alt())
})
function alt(){
    alert('确认要删除此条数据吗？')
}

//修改按钮
$('.tbo').on('click',' td:nth-child(10) img',function(){
    $('.tbo td:nth-child(10) img').click(alt1())
})
function alt1(){
    alert('确认要删修改此条数据吗？')
    $('.tbo tr').attr('contenteditable','true')
    console.log(111)
}
// 查找按钮
fetch('../../api/user0.json')
.then(function(res){return res.json()})
.then(function(data){
   
 return cha(data)
})
//=================================
var inp =$('.top .look input')
var btn = $('.top .look button')
var tbo = $('table .tbo')
function cha(data){
    var datn = []
    var text ;
    btn.click(function(){
        text = inp.val()
        data.map(function(item,index){          
                if(item.name===text){
                    tbo.html(`
                    <tr >
                    <td><input type="checkbox" name="check" id=""></td>
                    <td>${item.IDNumber}</td>
                    <td>${item.name}</td>
                    <td>${item.type}</td>
                    <td >${item.sex}</td>
                    <td>${item.phoneNum}</td>
                    <td>${item.time}</td>
                    <td>${item.idh}</td>
                    <td><img src="../../images/afterEnd/del.svg" alt="" title="删除用户"></td>
                    <td><img src="../../images/afterEnd/alter.svg" alt="" title="修改用户"></td> 
                    </tr>
                    `)
                }
            })      
        }) 
       
}
